import { useThemeConfig } from "@/stores/themeConfig"
import { Local } from "./storage"
import { THEME_CONFIG } from "@/const"
import { storeToRefs } from "pinia"
import pinia from "@/stores/pinia"
const ThemeConfig = useThemeConfig(pinia)
const {themeConfig} = storeToRefs(ThemeConfig)
import type{ ThemeConfigType } from "@/stores/types"
import { nextTick } from "vue"
import { useRoute } from "vue-router"
import router from "@/router"

/**
 * @description 全局组件大小
 */
export const globalComponentSize = ()=>{
    const localThemeConfig = Local.get(THEME_CONFIG) as ThemeConfigType | null
    return  localThemeConfig?.globalComponentSize || themeConfig.value.globalComponentSize
}

export const useTitle = ()=>{
    const store = useThemeConfig()
    const {themeConfig} = storeToRefs(store)
    nextTick(()=>{
        const {meta}= router.currentRoute.value
        let webTitle = meta.title ? meta.title : ''
        let globalTitle = themeConfig.value.globalTitle
        document.title = webTitle ? `${webTitle} - ${globalTitle}` : globalTitle
    })
}